<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
		<view class="section-0">
			<view class="section-body">
				<view class="tab">
					<view @click="setCurIdx(idx, item.name)"  :class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`" v-for="(item, idx) in tabList" :key="item.id">
						<view class="label">
							{{item.name}}
							<text v-if="item.type == 1">{{point1}}分</text>
							<text v-if="item.type == 2">{{point2}}分</text>
						</view>
						<view class="shape">
							<view class="shape-body"></view>
						</view>
						<view class="shape shape-mirrow">
							<view class="shape-body"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-1">
			<view class="list">
				<view class="item" v-for="item in list" :key="item.id">
					<view class="top">
						<view class="left">
							<view class="part">
								项目名：{{item.mian_project_name}}
							</view>
							<view class="part">
								单体工程名：{{item.project_name}}
							</view>
							<view class="part">
								违章等级：{{item.level ? item.level : '--' }}
							</view>
							<view class="part">
								违章日期：{{ item.supervisor_time ? item.supervisor_time.substring(0, 10) : '--'  }}
							</view>
							<view class="part">
								违章来源：{{ item.supervisor ? item.supervisor : '--'  }}
							</view>
						</view>
						<view class="right">
							扣分：{{item.score}}
						</view>
					</view>
					<view class="mid">
						<view class="label">扣分原因：</view>
						<view class="textarea-body">{{item.content}}</view>
					</view>
					<view class="bottom">
						<view class="left">所属单位：{{item.dw_name}}</view>
						<view class="right">所属职位：{{item.zrr_position}}</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import { commentListApi } from '@/api/statistics.js';
	export default {
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				list: [],
				id: 0,
				point1: 0,
				point2: 0,
				tabList: [
					{
						name: '系统扣分',
						id: 1,
						type: '1'
					},
					{
						name: '反违章扣分',
						id: 2,
						type: '2'
					},
				],
				curIdx: 0,
				curName: '检查扣分',
			}
		},
		onLoad(data) {
			this.id = data.id;
			this.point1 = data.point1;
			this.point2 = data.point2;
		},
		methods: {
			setCurIdx(idx, name) {
				this.curIdx = idx;
				this.curName = name;
				uni.showLoading({
					title: '加载中。。。'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleResetForm(){
				for (let key in this.form) {
					this.form[key] = '';
				}
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleSearch(){
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async upCallback(page) {
				const {data} =  await commentListApi({
					id: this.id,
					type: this.tabList[this.curIdx].type,
					page: page.num,
					pageSize: this.pageSize,
				});
				
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.data.last_page; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
				
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>	
	.section-1{
		width: 100%;
		.list{
			width: 100%;
			box-sizing: border-box;
			padding: 0 35rpx;
			padding-top: 40rpx;
			.item{
				width: 100%;
				border-radius: 30rpx;
				@include common-box-shadow;
				margin-bottom: 40rpx;
				box-sizing: border-box;
				padding: 30rpx 20rpx;
				.top{
					width: 100%;
					@include clear;
					margin-bottom: 10rpx;
					.left{
						width: 480rpx;
						@include font-normal
						float: left;
						.part{
							width: 100%;
							line-height: 30rpx;
							margin-bottom: 10rpx;
						}
					}
					.right{
						text-align: right;
						width: calc(100% - 480rpx);
						font-size: 28rpx;
						color: #1534ce;
						font-weight: bold;
						float: left;
					}
				}
				.mid{
					margin-bottom: 20rpx;
					.label{
						@include font-normal;
						margin-bottom: 10rpx;
					}
					.textarea-body{
						box-sizing: border-box;
						width: 100%;
						height: 200rpx;
						border: none;
						padding: 15rpx!important;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						font-size: 25rpx;
						border-radius: 15rpx;
						background-color: #ededed;
						color: #3b3c40;
						overflow-y: scroll;
					}		
				}
				.bottom{
					width: 100%;
					font-size: 18rpx;
					color: #3b3c40;
					.left{
						width: 100%;
						margin-bottom: 10rpx;
					}
					.right{
						width: 100%;
					}
				}
			}
		}
	}
	.section-0 {
		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			.tab{
				
					width: 100%;
					height: 80rpx;
					@include clear();
					background-color: #1534ce;
					.item{
						width: 50%;
						float: left;
						height: 80rpx;
						background-color: #1534ce;
						position: relative;
						.label{
							height: 80rpx;
							line-height: 80rpx;
							position: relative;
							z-index: 10;
							box-sizing: border-box;
							text-align: center;
							width: 100%;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
							text{
								color: #ffdc00;
								margin-left: 10rpx;
								font-size: 32rpx;
							}
						}
						.shape{
							z-index: 1;
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							bottom: 0;
							left: -50rpx;
							background: #000;
							display: none;
							background-color: #fff;
							overflow: hidden;
							.shape-body{
								width: 50rpx;
								height: 50rpx;
								background-color: #1534ce;
								border-bottom-right-radius: 40rpx;
							}
						}
						.shape-mirrow{
							z-index: 1;
							left: 0;
							display: none;
							.shape-body{
								border-bottom-right-radius: 0rpx;
								border-bottom-left-radius: 40rpx;
							}
						}
					}
					.item__active{
						border-top-left-radius: 40rpx;
						border-top-right-radius: 40rpx;
						background-color: #fff;
						.label{
							color: #46464a;
						}
						.shape{
							display: block;
						}
						.shape-mirrow{
							display: none;
						}
					}
					.item__active_next{
						border-bottom-right-radius: 50rpx;
						.shape{
							display: none;
						}
						.shape-mirrow{
							display: block;
						}
					}
				
			}
		}
	}
</style>
